<?php
namespace frontend\modules\yii\widgets;

use frontend\assets\AppAsset;
use Yii;
use yii\base\Widget;
use yii\helpers\ArrayHelper;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\web\View;

/**
 * A menu imitate the sidebar of https://docs.docker.com/get-started/
 *
 * @note It's depend on bootstrap;
 *
 * @example :
 * ```php

 * ```
 * @author chenzhiwei <chenzhiweiwk@qq.com>
 * @date   2021/09/04
 */
class Ztree extends Widget
{

    public $nodes;

    public function init()
    {
        parent::init(); // TODO: Change the autogenerated stub


        $this->nodes = is_array($this->nodes) ? $this->nodes : [];
        $this->nodes = json_encode($this->nodes);
        //var_dump($this->nodes);die;

        $this->addCss();
        $this->addJs();
    }

    public function addCss(){

    }

    public function addJs(){
        $js = <<<JS
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
   view: {
        addHoverDom: addHoverDom,
        removeHoverDom: removeHoverDom,
        selectedMulti: false
    },
   edit: {
       enable: true
   },
   callback: {
       onNodeCreated: function(event, treeId, treeNode){
           //console.info(event, treeId, treeNode);
       },
       onRename: function (event, treeId, treeNode, isCancel) {
           
        $.ajax({
            type: "POST",
            url: "rename-node",
            data: {
                id: treeNode.id,
                dname: treeNode.name
            },
            success: function(res) {
                console.info(res);
            },
            error: function () {
                console.info('error');
            }
        });  
        },
       beforeRemove: function(treeId, treeNode) {
           if(!confirm("Are you sure?")){
                return false;
           }
           
        },
       onRemove: function (event, treeId, treeNode) {
           $.ajax({
                type: "POST",
                url: "remove-node",
                data: {
                    id: treeNode.id
                },
                success: function(res) {
                    console.info(res);
                },
                error: function () {
                    console.info('error');
                }
            }); 
        }   
   }
};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = {$this->nodes};

// [
// {name:"test1", open:true, children:[
//   {name:"test1_1"}, {name:"test1_2"}]},
// {name:"test2", open:true, children:[
//   {name:"test2_1"}, {name:"test2_2"}]}
// ];

zTreeObj = $.fn.zTree.init($("#zTreeId"), setting, zNodes);

var newCount = 1;
function addHoverDom(treeId, treeNode) {
    var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
        + "' title='add node' onfocus='this.blur();'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_"+treeNode.tId);
    if (btn) btn.bind("click", function(){
        var zTree = $.fn.zTree.getZTreeObj("zTreeId");
        zTree.addNodes(treeNode, {id:(1000 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
        console.info(treeId,treeNode);
        $.ajax({
            type: "POST",
            url: "add-node",
            data: {
                pid: treeNode.id,
                catalogue: $('select[name="catalogue"]').val(),
                dname: "new node"
            },
            success: function(res) {
                console.info(res);
            },
            error: function () {
                console.info('error');
            }
        });
        return false;
    });
};
function removeHoverDom(treeId, treeNode) {
    $("#addBtn_"+treeNode.tId).unbind().remove();
};

JS;
        $this->view->registerJs($js, View::POS_READY, "zTree-js-key1");

    }

    public function run()
    {
        parent::run(); // TODO: Change the autogenerated stub

        return "<div><ul id='zTreeId' class='ztree'></ul></div>";
    }
}
